<template>
  <div class="cell_box noborder" :style="calcBoxStyle">
    <div class="cell" :style="calcCellStyle">
      <span class="cell-text">{{ cell.Text.replaceAll("'","") }}</span>
    </div>
  </div>
</template>
<script>
export default {
  inject: ['manager', 'gridView'],
  props: {
    cell: {
      type: Object,
      default: () => { },
    },
  },
  emits: ['select'],
  computed: {
    calcCellStyle() {
      const obj = {
        fontSize: this.cell.FontSize + 'px',
        fontName: this.cell.FontName,
      };
      if (this.cell.FontBold) {
        obj['font-weight'] = 'bolder';
      }
      if (this.cell.FontItalic) {
        obj['font-style'] = 'italic';
      }
      if (this.cell.FontStrikeout) {
        obj['text-decoration'] = 'line-through';
      }
      if (this.cell.FontUnderline) {
        obj['text-decoration'] = 'underline';
      }
      if (this.cell.VerticalAlign === 'Top') {
        obj['align-items'] = 'start';
      } else if (this.cell.VerticalAlign === 'Middle') {
        obj['align-items'] = 'center';
      } else if (this.cell.VerticalAlign === 'Bottom') {
        obj['align-items'] = 'end';
      }
      if (this.cell.TextAlign === 'Left') {
        obj['justify-content'] = 'start';
      } else if (this.cell.TextAlign === 'Center') {
        obj['justify-content'] = 'center';
      } else if (this.cell.TextAlign === 'Right') {
        obj['justify-content'] = 'end';
      }

      if (this.cell.WritingMode === 'Horizontal') {
        obj['writing-mode'] = 'lr-tb';
      } else if (this.cell.WritingMode === 'Vertical') {
        obj['writing-mode'] = 'tb-rl';
      }
      obj['font-family'] = this.cell.FontName;
      obj['font-size'] = this.cell.FontSize + 'px';
      return obj;
    },
    calcBoxStyle() {
      const obj = {
        height: '0px',
        width: '0px',
        left: '0px',
        top: '0px',
        zIndex: this.gridView.ZIndex * 10,
      };
      let height = 0;
      for (let i = this.cell.RowIndex; i <= this.cell.MaxRowIndex; i++) {
        height += this.gridView.Rows[i].Height;
      }
      obj.height = height + 'px';
      let width = 0;
      for (let i = this.cell.ColumnIndex; i <= this.cell.MaxColumnIndex; i++) {
        width += this.gridView.Columns[i].Width;
      }
      obj.width = width + 'px';
      if (this.cell.MaxRowIndex !== this.cell.RowIndex || this.cell.MaxColumnIndex !== this.cell.ColumnIndex) {
        obj.zIndex++;
      }
      let top = 0;
      let left = 0;
      for (let i = 0; i < this.cell.RowIndex; i++) {
        top += this.gridView.Rows[i].Height;
      }
      obj.top = top + 'px';
      for (let i = 0; i < this.cell.ColumnIndex; i++) {
        left += this.gridView.Columns[i].Width;
      }
      obj.left = left + 'px';

      if (this.manager.bookCord.showType === 'CordL') {
        obj['border-bottom-style'] = 'none';
        obj['border-top-style'] = 'none';
        obj['border-left-style'] = 'none';

        if (this.cell.BorderRightLineStyle !== 'None') {
          obj['border-right'] = this.cell.BorderRightWidth + 'px';
          obj['border-right-style'] = this.cell.BorderRightLineStyle;
          obj['border-right-color'] = this.cell.BorderRightColor;
        } else {
          obj['border-right-style'] = 'none';
        }
      } else {
        obj['border-right-style'] = 'none';
        obj['border-top-style'] = 'none';
        obj['border-left-style'] = 'none';

        if (this.cell.BorderBottomLineStyle !== 'None') {
          obj['border-bottom'] = this.cell.BorderBottomWidth + 'px';
          obj['border-bottom-style'] = this.cell.BorderBottomLineStyle;
          obj['border-bottom-color'] = this.cell.BorderBottomColor;
        } else {
          obj['border-bottom-style'] = 'none';
        }
      }

      obj['padding-left'] = this.cell.PaddingLeft + 'px';
      obj['padding-top'] = this.cell.PaddingTop + 'px';
      obj['padding-right'] = this.cell.PaddingRight + 'px';
      obj['padding-bottom'] = this.cell.PaddingBottom + 'px';

      return obj;
    },
  },
  methods: {

    // int转rgb
    // converArgbToRgb(argb) {
    //   const rgb = [];
    //   rgb[0] = (argb & 0xff0000) >> 16;
    //   rgb[1] = (argb & 0xff00) >> 8;
    //   rgb[2] = (argb & 0xff);
    //   return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
    // },
  },
};
</script>
<style lang="scss">

</style>
